<template>
  <div class="top-article">
    <el-row>
      <div class="article-category">
        <span>热门推荐</span>
        <div class="article-recommend-icon"></div>
      </div>
      <el-divider></el-divider>
      <ul>
        <li v-for="(item, index) in hotArticle" class="top-article-item">
          <el-link @click="clickHotArticle(item)"  :underline="false" class="top-article-title" >{{item.title}}</el-link>
          <span style="float: right;margin-right: 10px"><i class="el-icon-view"/> {{item.viewCount}} </span>
        </li>
      </ul>
    </el-row>
  </div>
</template>

<script>
   import {getRecommendArticle} from "../api/article/article";

   export default {
     name: "HotArticle",
     data() {
       return {
         hotArticle: []
       }
     },
     mounted() {
       this.getRecommendArticle()
     },
     methods: {
       getRecommendArticle() {
         getRecommendArticle().then(res => {
           this.hotArticle = res
         })
       },
       clickHotArticle(item) {
         this.$emit('clickHotArticle', item)
       }
     }
   }
</script>

<style scoped>
  .article-recommend-icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: text-top;
    background-position: center;
    background-image: url("../../static/img/fire.png");
    background-size: 16px;
    background-repeat: no-repeat;
  }
  .top-article /deep/ .el-divider--horizontal {
    margin: 0 0;
  }
  .top-article-item {
    line-height: 30px;
    height: 30px;
    font-weight: 400;
    font-size: 14px;
  }
  .top-article-title {
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis ;
    display: inline-block;
    width: 180px
  }
  .article-category {
    border-radius: 1vh;
    height: 5vh;
    line-height: 5vh;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: rgb(23, 62, 103);
  }
  .top-article {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
    padding: 10px;
    min-height: 300px;
    border-radius: 15px;
    font-size: 15px;
    box-shadow: 0 0 10px #b6b5b5;
  }
</style>
